<!--
 * @Author: Charlie/刘欣玥
 * @email: 413157399@qq.com
 * @Date: 2022-07-24 15:40:28
-->
<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!-- <el-button type="primary" icon="el-icon-plus" size="mini">新增</el-button> -->
      <el-input
        class="marleft"
        v-model="pagePara.phone"
        clearable
        placeholder="请输入用户手机号"
      />
      <el-button
        type="success"
        icon="el-icon-search"
        size="mini"
        @click="toQuery"
        >搜索</el-button
      >
    </div>
    <!--表格渲染-->
    <el-table
      v-loading="loading"
      ref="singleTable"
      :data="userData"
      style="width: 100%"
    >
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column ref="table" prop="avatar" label="用户头像">
        <template slot-scope="scope">
          <!-- <a :href="scope.row.avatar" style="color: #42b983" target="_blank"><img :src="scope.row.avatar" alt="点击打开"
              class="el-avatar"></a> -->

          <img :src="scope.row.avatar" alt="点击打开" class="el-avatar" />
        </template>
      </el-table-column>
      <el-table-column prop="nickname" label="昵称" />
      <el-table-column prop="phone" label="手机号" />
      <el-table-column prop="signNum" label="钱包金额" />
      <el-table-column prop="level" label="会员等级" />
      <el-table-column prop="availableIntegral" label="可用积分" />
      <el-table-column prop="assets" label="资产（元）" />
      <el-table-column prop="jds" label="LZG" />
      <el-table-column prop="spareMoney" label="创业基金" />
      <el-table-column prop="registerType" label="注册方式" />
      <el-table-column prop="region" label="注册区域" />
      <el-table-column prop="updateTime" label="更新时间" />
      <el-table-column prop="createTime" label="创建时间" />
      <el-table-column label="状态" align="center" prop="status" width="150">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-color="#409EFF"
            inactive-color="#F56C6C"
            active-text="激活"
            inactive-text="禁用"
            :active-value="1"
            :inactive-value="0"
            @change="handbtn(scope.row, scope.row.status)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="270px">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="primary"
            @click="handlenext(scope.$index, scope.row)"
            >下级用户</el-button
          >
          <el-button
            size="mini"
            type="primary"
            @click="handleminxi(scope.$index, scope.row)"
            >积分明细</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      width="1800"
      title="查看分销下级"
      :visible.sync="dialogTableVisible"
    >
      <el-row class="grid-content bg-purple-dark">
        <el-col :span="4">
          <div>下级分销商:</div>
        </el-col>
        <el-col :span="5">
          <div>总人数:{{ headcount }}人</div>
        </el-col>
        <el-col :span="3">
          <div>一级:{{ firstmenberTotal }}人</div>
        </el-col>
        <el-col :span="3">
          <div>二级:{{ secondLevelTotal }}人</div>
        </el-col>
      </el-row>
      <el-row :span="24">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="一级" name="first">
            <el-table :data="gridData">
              <el-table-column label="用户头像">
                <template slot-scope="scope">
                  <img
                    :src="scope.row.avatar"
                    alt="点击打开"
                    class="el-avatar"
                  />
                </template>
              </el-table-column>
              <el-table-column
                property="nickname"
                label="昵称"
              ></el-table-column>
              <el-table-column
                property="phone"
                label="手机号码"
              ></el-table-column>
              <el-table-column
                property="realName"
                label="真实姓名"
              ></el-table-column>
              <el-table-column
                property="openId"
                label="微信号"
              ></el-table-column>
              <el-table-column
                property="ptime"
                label="加入时间"
              ></el-table-column>
            </el-table>
            <!--一级分页组件-->
            <el-pagination
              :total="firstmenberTotal"
              style="margin-top: 8px"
              layout="total, prev, pager, next, sizes"
              :page-sizes="[10, 20, 50, 100]"
              @size-change="sizeChange($event, 'firstmenber')"
              @current-change="pageChange($event, 'firstmenber')"
            />
          </el-tab-pane>
          <el-tab-pane label="二级" name="second">
            <el-table :data="secondLevelGridData">
              <el-table-column label="用户头像">
                <template slot-scope="scope">
                  <img
                    :src="scope.row.avatar"
                    alt="点击打开"
                    class="el-avatar"
                  />
                </template>
              </el-table-column>
              <el-table-column
                property="nickname"
                label="昵称"
              ></el-table-column>
              <el-table-column
                property="phone"
                label="手机号码"
              ></el-table-column>
              <el-table-column
                property="realName"
                label="真实姓名"
              ></el-table-column>
              <el-table-column
                property="openId"
                label="微信号"
              ></el-table-column>
              <el-table-column
                property="ptime"
                label="加入时间"
              ></el-table-column>
            </el-table>
            <!-- 二级分页 -->
            <el-pagination
              :total="secondLevelTotal"
              style="margin-top: 8px"
              layout="total, prev, pager, next, sizes"
              :page-sizes="[10, 20, 50, 100]"
              @size-change="sizeChange($event)"
              @current-change="pageChange"
            />
          </el-tab-pane>
        </el-tabs>
      </el-row>
    </el-dialog>

    <!-- 编辑会员 -->
    <el-dialog title="编辑会员" :visible.sync="dialogVisible" width="600px">
      <span>
        <el-form
          :inline="true"
          :model="formInline"
          class="demo-form-inline"
          label-position="right"
        >
          <el-form-item label="用户名" label-width="70px">
            <el-input
              v-model="formInline.username"
              placeholder="请输入用户名"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="昵称" label-width="82px">
            <el-input
              v-model="formInline.nickname"
              placeholder="请输入昵称"
            ></el-input>
          </el-form-item>
          <el-form-item label="积分" label-width="70px">
            <el-input
              v-model="formInline.availableIntegral"
              placeholder="请输入可用积分"
              disabled
            ></el-input>
          </el-form-item>

          <el-form-item label="生日" label-width="82px">
            <el-input
              v-model="formInline.birthday"
              placeholder="请输入生日"
            ></el-input>
          </el-form-item>

          <el-form-item label="星级" label-width="70px">
            <el-input
              v-model="formInline.level"
              placeholder="请输入星级"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="创业备用金">
            <el-input
              v-model="formInline.spareMoney"
              placeholder="请输入创业备用金"
              disabled
            ></el-input>
          </el-form-item>

          <el-form-item label="性别" label-width="68px">
            <el-select
              v-model="formInline.sex"
              placeholder="性别"
              style="width: 185px"
            >
              <el-option label="男" value="1"></el-option>
              <el-option label="女" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sure">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 积分明细 -->
    <el-dialog
      title="积分明细"
      :visible.sync="VIPdialogVisible"
      width="80%"
      :before-close="vipClose"
    >
      <span>
        <el-table :data="vipIntegral" style="width: 100%">
          <el-table-column prop="operationType" label="操作类型" width="180">
            <template slot-scope="scope">
              {{
                scope.row.operationType == "ADD"
                  ? "收入"
                  : scope.row.operationType == "MINUS"
                  ? "支出"
                  : ""
              }}
            </template>
          </el-table-column>
          <el-table-column label="明细">
            <template slot-scope="scope">
              <p>
                <span>
                  {{
                    scope.row.quantity === 0
                      ? ""
                      : scope.row.operationType == "MINUS"
                      ? "-"
                      : "+"
                  }}</span
                >{{ scope.row.quantity }}
              </p>
            </template>
          </el-table-column>
          <el-table-column prop="source" label="来源"> </el-table-column>
          <el-table-column prop="createTime" label="创建时间">
          </el-table-column>
        </el-table>
      </span>

      <div class="block">
        <el-pagination
          @size-change="sizeChange($event, 'VIP')"
          @current-change="pageChange($event, 'VIP')"
          :page-sizes="[1, 10, 20, 30, 40]"
          layout="total,sizes, prev, pager, next"
          :total="vipTotal"
        >
        </el-pagination>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="VipCancel">取 消</el-button>
        <el-button type="primary" @click="vipSure">确 定</el-button>
      </span>
    </el-dialog>
    <!--分页组件-->

    <el-pagination
      :total="total"
      style="margin-top: 8px"
      layout="total, prev, pager, next, sizes"
      :page-sizes="[10, 20, 50, 100]"
      @size-change="sizeChange($event, 'Members')"
      @current-change="pageChange($event, 'Members')"
    />
  </div>
</template>

<script>
import { getdict } from "@/api/system/dictDetail";
import {
  getMember,
  secondLevelMenber,
  updateById,
  firstmenber,
  imgurl,
  vipIntegralDetail,
} from "@/api/yxUser";
import Switcher from "./component/Switcher";
import crud from "@/mixins/crud";

export default {
  name: "userIndex",
  components: {
    Switcher,
  },
  mixins: [crud],
  data() {
    return {
      status: 1,
      headcount: "",
      total: 0,
      avatarid: "",
      activeName: "first",
      gridData: [],
      secondLevelGridData: [], //二级数据
      dialogTableVisible: false,
      checked: "",

      loading: false, //加载loading
      userData: [], //会员列表
      pagePara: {
        pageNum: 1,
        pageSize: 10,
        phone: "", //搜索
        currentPage: 1,
      },

      firstmenberPage: {
        //一级分页
        pageNum: 1,
        pageSize: 10,
        id: "",
      },
      secondLevelPage: {
        pageNum: 1,
        pageSize: 10,
        id: "",
      },
      firstmenberTotal: 0, //一级人数
      secondLevelTotal: 0, //二级人数

      // 编辑会员分页
      vipPage: {
        pageNum: 1,
        pageSize: 10,
        id: "",
      },
      vipTotal: 0,
      // picked: 'one'

      dialogVisible: false, //编辑会员
      VIPdialogVisible: false,

      formInline: {
        username: "",
        nickname: "",
        sex: "",
        id: "",
        availableIntegral: "",
        birthday: "",
        level: "",
        spareMoney: "",
      },
      // 编辑会员分页

      vipIntegral: [
        // {
        //   operationType: '',
        //   quantity: '',
        //   source: '',
        //   createTime: ''
        // }
      ], //会员积分详情

      integralDetails: "",
      vipID: "",
    };
  },
  created() {},
  mounted() {
    this.getMembers();
  },
  methods: {
    handleClose() {},
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handbtn(row, index) {
      console.log(row.status);
      if (row.status == 1) {
        row.check = "激活";
      } else {
        row.check = "禁用";
      }
      this.$confirm(
        '此操作将 "' + row.check + '" ' + "状态" + ", 是否继续？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          if (row.status == 1) {
            row.status === 0;

            updateById({ id: row.id, status: row.status })
              .then((res) => {
                console.log("row.status == 1");
                console.log(row.status);
                console.log(res);
              })
              .catch((err) => {
                console.log(err.response.data.message);
              });
          } else if (row.status == 0) {
            row.status === 1;

            updateById({ id: row.id, status: row.status })
              .then((res) => {
                console.log("row.status == 0");
                console.log("0", row.status);

                console.log(res);
              })
              .catch((err) => {
                console.log(err.response.data.message);
              });
          }
        })
        .catch((err) => {
          row.status = row.status === 0 ? 1 : 0;
        });
      console.log("---", row, row.status);

      console.log("-+++--", row, index);
    },
    callback(e) {
      // this.checked = checkedInfo
      // this.handbtn()
      console.log("父组件", e);
    },
    handleEdit(index, row) {
      console.log(index, row);
      this.dialogVisible = true;
      this.formInline = row;
      if (this.formInline.sex === 1) {
        this.formInline.sex = "男";
      } else if (this.formInline.sex === 2) {
        this.formInline.sex = "女";
      }
    },

    sure() {
      this.dialogVisible = false;
      console.log(this.formInline);
      updateById({
        id: this.formInline.id,
        sex: +this.formInline.sex,
        username: this.formInline.username,
        nickname: this.formInline.nickname,
        availableIntegral: this.formInline.availableIntegral,
        birthday: this.formInline.birthday,
        level: this.formInline.level,
        spareMoney: this.formInline.spareMoney,
      })
        .then((res) => {
          console.log(res);
          this.editSuccessNotify();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handlenext(index, row) {
      this.dialogTableVisible = true;
      this.firstmenberPage.id = row.id;
      this.secondLevelPage.id = row.id;
      this.getFirstmenber();
      this.getSecondLevel();
    },
    handleminxi(index, row) {
      this.VIPdialogVisible = true;
      this.vipID = row.id;
      console.log(index, row);
      this.getvipIntegralDetail();
    },
    getvipIntegralDetail() {
      getdict({ dictName: "integral_source" }).then((resp) => {
        // resp.some((itemm, i) => {
        vipIntegralDetail({
          id: this.vipID,
          pageNum: this.vipPage.pageNum,
          pageSize: this.vipPage.pageSize,
        })
          .then((res) => {
            // this.vipIntegral =
            // console.log(`11111`, res);
            if (res.data.records[0]) {
              // res.data.records.some((item, i) => {
              //   if (item.source == itemm.value) {
              //     item.source = itemm.label;
              //     // console.log("2222", item.source);
              //   }
              // });
              res.data.records.forEach((item) => {
                let flay = resp.findIndex((item2) => {
                  return item2.value == item.source;
                });
                if (flay != -1) {
                  item.source = resp[flay].label;
                }
              });
              this.vipTotal = res.data.total;
              // console.log(1);
              this.vipIntegral = res.data.records;
              this.integralDetails = res.data.records[0];
              // console.log(this.vipIntegral);
            } else {
              this.vipIntegral = "";
            }
          })
          .catch((err) => {
            console.log(err);
          });
        // });
      });
    },
    vipClear() {
      this.VIPdialogVisible = false;
      // this.vipIntegral = ''
      this.vipIntegral[0].operationType = "";
      this.vipIntegral[0].quantity = "";
      this.vipIntegral[0].source = "";
      this.vipIntegral[0].createTime = "";
      this.vipTotal = 0;
      this.vipPage.pageNum = 1;
      this.vipPage.pageSize = 10;
      this.vipPage.id = "";
      this.vipID = "";
    },
    vipSure() {
      this.vipClear();
    },
    VipCancel() {
      this.vipClear();
    },
    vipClose() {
      this.vipClear();
    },
    firstmenbers() {},
    getMembers() {
      getMember(this.pagePara)
        .then((res) => {
          if (res.status == "1") {
            res.data.data.records.forEach((item) => {
              imgurl(item.avatar).then((ress) => {
                // console.log("imgurl", ress);
                // console.log("item", item);

                item.avatar = ress;
                // console.log("imgurlssss", item.avatar);
              });
            });

            this.userData = res.data.data.records;
            let totalpage = parseInt(res.data.data.total);
            this.total = totalpage;
            console.log("this.userData", this.userData);
          }
        })
        .catch((err) => {
          console.log(err.response.data.message);
        });
    },
    getFirstmenber() {
      firstmenber(this.firstmenberPage).then((res) => {
        let totals = parseInt(res.data.total);
        console.log("------------", typeof totals);
        this.gridData = res.data.records;

        this.firstmenberTotal = totals;
        // console.log("--firstmenber--", res.data.list);
        res.data.records.forEach((item) => {
          imgurl(item.avatar).then((ress) => {
            // console.log("imgurl", ress);
            item.avatar = ress;
            // console.log("imgurlssss", item.avatar);
          });
        });
      });
    },
    getSecondLevel() {
      secondLevelMenber(this.secondLevelPage).then((res) => {
        let totals = parseInt(res.data.total);
        this.secondLevelGridData = res.data.records;
        this.secondLevelTotal = totals;
        this.headcount = this.firstmenberTotal + this.secondLevelTotal;
        res.data.records.forEach((item) => {
          imgurl(item.avatar).then((ress) => {
            // console.log("imgurl", ress);
            item.avatar = ress;
            // console.log("imgurlssss", item.avatar);
          });
        });
      });
    },
    handleSizeChange(e) {
      console.log("sizeChange", e);
      this.pagePara.pageSize = e;
      this.getMembers();
    },
    handleCurrentChange(e) {
      console.log("CurrentChange", e);
      this.pagePara.pageNum = e;
      this.getMembers();
    },
    sizeChange(e, str) {
      // 会员列表分页改变时
      if (str == "Members") {
        console.log("sizeChange", e);
        this.pagePara.pageSize = e;
        this.getMembers();
      }
      // 当一级分页改变时
      else if (str === "firstmenber") {
        this.firstmenberPage.pageSize = e;
        // alert(e)
        this.getFirstmenber();
      }
      // 当编辑会员分页改变时
      else if (str === "VIP") {
        this.vipPage.pageSize = e;
        console.log(this.vipIntegral);
        this.getvipIntegralDetail();
      }
      //当二级分页改变时
      else {
        this.secondLevelPage.pageSize = e;
        this.getSecondLevel();
      }
    },
    pageChange(e, str) {
      console.log(e);
      // 会员列表分页改变时
      if (str == "Members") {
        console.log("pageChange", e);
        this.pagePara.pageNum = e;
        this.getMembers();
      }
      // 当一级分页改变时
      else if (str == "firstmenber") {
        this.firstmenberPage.pageNum = e;
        this.getFirstmenber();
      } else if (str === "VIP") {
        this.vipPage.pageNum = e;
        this.getvipIntegralDetail();
      }
      //当二级分页改变时
      else {
        this.secondLevelPage.pageNum = e;
        this.getSecondLevel();
      }
    },
    toQuery() {
      this.getMembers();
    },
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  transform: translateX(-100px);
}

.bg-purple-dark {
  background: #6fb6f83c;
  color: rgb(11, 86, 93);
  border: 1px solid rgba(5, 179, 205, 0.433);
  height: 50px;
  line-height: 50px;
  border-radius: 5px;
  padding-left: 20px;
}

.head-container {
  display: flex;
  align-items: center; // 垂直居中

  .marleft {
    width: 200px;
    margin-left: auto;
    margin-right: 10px;
  }
}
</style>